import { FC, useEffect, useRef } from "react"
import {
    AxesHelper,
    PointLight, Scene,
    WebGLRenderer,
    AmbientLight,
    OrthographicCamera
} from "three"
import { BoxMatrix } from "R/models";
import { OrbitControls } from "three/examples/jsm/Addons.js";
import { GUI } from "dat.gui";
const baseViewWidth = 50
const Page: FC = () => {
    const container = useRef<HTMLCanvasElement>(null);
    // 基本对象
    useEffect(() => {
        const bodyele = document.body, radio = bodyele.clientWidth / bodyele.clientHeight
        const renderer = new WebGLRenderer({ canvas: container.current! }),
        
            camera = new OrthographicCamera(
                -baseViewWidth * radio,
                baseViewWidth * radio,
                baseViewWidth,
                -baseViewWidth,
                1, 1000),
            scene = new Scene(),
            pointLight = new PointLight(0xffffff, 10),
            axesHelper = new AxesHelper(1000),
            ambient = new AmbientLight(0xffffff, 1)
        renderer.setClearAlpha(.4)
        const gui = new GUI()
        pointLight.decay = 0
        pointLight.position.set(1000, 10000, 1000)
        new OrbitControls(camera, renderer.domElement)
        scene.add(
            ambient,
            axesHelper,
            pointLight,
            BoxMatrix
        )
        camera.position.set(0, 40, 0)
        camera.lookAt(0, 0, 0)
        renderer.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
        function roun(t?: number) {
            renderer.render(scene, camera)
            requestAnimationFrame(roun)
        }
        roun()
        return () => {

            gui.destroy()
            // renderer.dispose()
        }
    }, [])
    return <canvas ref={container}></canvas>
}
export default Page